<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>可视化放学</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="css/student_leave.css" />
	<link rel="stylesheet" href="../css/main.css" />
	<style>
		.main3 {
			background: #edf2f8;
			margin-left: auto;
			margin-right: auto;
			box-shadow: 0 0 8px #b1aeae;
			border-radius: 5px 5px 5px 5px;
			padding: 10px 10px 10px 10px;
			margin: 20px 10px 20px 10px;
			font-size: 12px;
		}

		.result {
			height: 20px;
			float: right;
			font-size: 14px;
			font-weight: bold;
			letter-spacing: 0.2em;
			left: 5%;
			color: crimson;
			padding: 0 calc((50px - 3em) / 2) 0.1em calc((50px - 3em) / 2 + 0.2em);
			border-radius: 5px;
			border-width: 2px;
			border-style: solid;
			position: absolute;
		}

		.data_tan {
			position: fixed;
			top: 30%;
			width: 80%;
			background-color: white;
			margin: 0 10%;
			border-radius: 5px;
			display: inline-block;
			box-shadow: 0 0 0 #ccc,
				/*左边阴影*/
				0 -2px 3px #ccc,
				/*顶部阴影*/
				0 0 0 #ccc,
				/*底部阴影*/
				2px 0 3px #ccc;
			/*右边阴影*/
		}

		[v-for] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="contain">
			<div class="header">
				<div class="header_title">可视化放学</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return" />
				</a>
			</div>
			<div style="height: 50px"></div>
			<div style="text-align: center">
				<!-- <select style="height: 30px; width: 46%">
					<option value="null">根据班级查找</option>
					<option value="1">A150班</option>
					<option value="2">A118班</option>
					<option value="3">A116班</option>
				</select> -->
				<select style="height: 30px; width: 46%" v-model="status1">
					<option :value="null">根据状态查找</option>
					<option :value="1">已放学</option>
					<option :value="2">未放学</option>
					<option :value="3">放学中</option>
				</select>
			</div>
			<div v-for="item in list" :key="item.id">
				<div class="main3">
					<div class="result" style="left: 75%" @click="edit(item.id)">修改今天放学时间</div>

					<div style="height: 25px"></div>
					<p>
						所在班级：{{item.classesName}}
						<label style="position: absolute; left: 57%">放学状态：{{status(item)}}</label>
					</p>
					<p>
						放学时间：{{item.startTime+' - '+item.endTime}}
						<label style="position: absolute; left: 57%">今日放学时间：{{item.startTime1+' -
							'+item.endTime1}}</label>
					</p>
				</div>
			</div>
			<div style="height: 50px"></div>
		</div>

		<div class="data_tan" v-show="show">
			<div style="padding: 8px 10px 0">修改放学时间</div>
			<hr />
			<div style="text-align: center; padding: 5px 0">
				<input id="test1" :value="form.startTime1" placeholder="放学开始时间" style="height: 25px; width: 80%" />
			</div>
			<div style="text-align: center; padding: 5px 0">
				<input id="test2" :value="form.endTime1" placeholder="放学结束时间" style="height: 25px; width: 80%" />
			</div>
			<div style="padding: 15px 10%; text-align: right">
				<button @click="submit">确定</button>
				<button @click="show=false">取消</button>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>

	<script>
		var now = dayjs().format('HH:mm:ss');

		var app = new Vue({
			el: "#app",
			data: {
				show: false,
				list0: [],
				form: {},
				status1: null
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					axios.get("/t/leaveTime").then(function (res) {
						this.list = res.data;
						this.list.forEach(function (it) {
							if (!it.today) {
								it.startTime1 = it.startTime;
								it.endTime1 = it.endTime;
							}
						});
					}.bind(this));
				},
				status: function (it) {
					if (now < it.startTime1) return '未放学';
					if (now > it.endTime1) return '已放学';
					return '放学中';
				},
				edit: function (id) {
					this.form.id = id;
					this.show = true;
				},
				submit: function () {
					axios.post('/t/leaveTime', this.form).then(function (res) {
						this.getData();
					}.bind(this));
				}
			},
			computed: {
				list: function () {
					if (!this.status1)
						return this.list0;
					var a = ['', '未放学', '已放学', '已放学'][this.status1];
					return this.list0.filter(function (it) {
						return this.status(it) == a;
					}.bind(this));
				}
			},
		});

		laydate.render({
			elem: "#test1",
			type: "time",
			trigger: "click",
			done: function (value, date, endDate) {
				this.app.form.startTime1 = value;
			}
		});
		laydate.render({
			elem: "#test2",
			type: "time",
			trigger: "click",
			done: function (value, date, endDate) {
				this.app.form.endTime1 = value;
			}
		});
	</script>
</body>

</html>